<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>杭州出租房数据驾驶舱</title>
  <link rel="stylesheet" href="css/reset.css">
  <!-- build:css -->
  <link rel="stylesheet" href="css/cockpit.css">
  <link rel="stylesheet" href="css/left.css">
  <link rel="stylesheet" href="css/middle.css">
  <link rel="stylesheet" href="css/right.css">
  <link rel="stylesheet" href="css/style.css">
  <!-- endbuild -->
  <script src="js/ajaxSet.js"></script>
  <script src="js/lib/jquery.min.js"></script>
</head>
<body>
  <div id="container" style="background:black">
    <div class="loading" id="loadingBox"><span></span><span></span><span></span><span></span><span></span></div>

    <div class="screen-container-wrapper container-box-left">
      <div class="left-box0" id="Date"></div>
      <div class="left-box1">
        <h1 class="sub-title">全城出租率</h1>
        <div class="left-box1-inner">
          <div class="left-box1-item">
            <h2 class="weight"><i class="circle-icon"></i>整租 <span>60</span>%</h2>
            <p>全城整租  <span>2160</span>套</p>
          </div>
          <div class="left-box1-item">
            <h2 class="weight"><i class="circle-icon red"></i>合租 <span>40</span>%</h2>
            <p>全城合租  <span>1000</span>套</p>
          </div>
        </div>
      </div>

      <div class="left-box2">
        <h1 class="sub-title sub-title1">整租出租率Top3<span id="checkBtn1" class="check-btn">查看全部</span></h1>
        <div class="left-box2-inner">
          <ul class="left-box2-inner">
            <li>
              <h1><b><span>西湖区</span> <strong>1180</strong><small>套</small></b> <b><span class="white">50</span><small>%</small></b></h1>
              <div class="staff-progress-bar">
                <div class="staff-progress-bg"></div>
                <div class="staff-progress xihu" style="width:50%"></div>
              </div>
              <div class="box2-tips">
                <h3>西湖区</h3>
                <h5>出租: 1180套</h5>
                <h5>占比: 50%</h5>
              </div>
            </li>
            <li>
              <h1><b><span>拱墅区</span> <strong>880</strong><small>套</small></b> <b><span class="white">20</span><small>%</small></b></h1>
              <div class="staff-progress-bar">
                <div class="staff-progress-bg"></div>
                <div class="staff-progress gongsu" style="width:20%"></div>
              </div>
              <div class="box2-tips">
                <h3>拱墅区</h3>
                <h5>出租: 880套</h5>
                <h5>占比: 20%</h5>
              </div>
            </li>
            <li>
              <h1><b><span>上城区</span> <strong>480</strong><small>套</small></b> <b><span class="white">10</span><small>%</small></b></h1>
              <div class="staff-progress-bar">
                <div class="staff-progress-bg"></div>
                <div class="staff-progress shangcheng" style="width:10%"></div>
              </div>
              <div class="box2-tips">
                <h3>上城区</h3>
                <h5>出租: 480套</h5>
                <h5>占比: 10%</h5>
              </div>
            </li>
          </ul>
        </div>
      </div>


      <div class="left-box2">
        <h1 class="sub-title sub-title1">合租出租率Top3<span class="check-btn" id="checkBtn2">查看全部</span></h1>
        <div class="left-box2-inner">
          <ul class="left-box2-inner">
            <li>
              <h1><b><span>萧山区</span> <strong>1180</strong><small>套</small></b> <b><span class="white">50</span><small>%</small></b></h1>
              <div class="staff-progress-bar">
                <div class="staff-progress-bg"></div>
                <div class="staff-progress xiaoshan" style="width:50%"></div>
              </div>
              <div class="box2-tips">
                <h3>萧山区</h3>
                <h5>出租: 1180套</h5>
                <h5>占比: 50%</h5>
              </div>
            </li>
            <li>
              <h1><b><span>滨江区</span> <strong>880</strong><small>套</small></b> <b><span class="white">20</span><small>%</small></b></h1>
              <div class="staff-progress-bar">
                <div class="staff-progress-bg"></div>
                <div class="staff-progress binjiang" style="width:20%"></div>
              </div>
              <div class="box2-tips">
                <h3>滨江区</h3>
                <h5>出租: 880套</h5>
                <h5>占比: 20%</h5>
              </div>
            </li>
            <li>
              <h1><b><span>临平区</span> <strong>480</strong><small>套</small></b> <b><span class="white">10</span><small>%</small></b></h1>
              <div class="staff-progress-bar">
                <div class="staff-progress-bg"></div>
                <div class="staff-progress linping" style="width:10%"></div>
              </div>
              <div class="box2-tips">
                <h3>临平区</h3>
                <h5>出租: 480套</h5>
                <h5>占比: 10%</h5>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="left-box3">
        <header class="screen-sub-title7">
          <p>出租率运营图</p>
          <div class="left-box-select">
            <div id="leftSelect1"></div>
          </div>
        </header>
        <div id="leftBox3" style="height: 260px"></div>
      </div>

    </div>
    <div class="screen-container-wrapper container-box-middle">
      <div class="middle-inner">
        <div class="middle-title"  style="">
          <img src="img/house_title_bg.png" width="100%"/>
          <div class="middle-title-text">杭州出租房数据驾驶舱</div>
        </div>

        <div class="middle-box4">
          <div class="middle-box4-inner">
            <dl>
              <dt><div class="middle-box4-icon hz-icon1"></div></dt>
              <dd>
                <p><span class="title">房源总量:</span><span class="white weight">3000</span><small>套</small></p>
                <p class="line2"><span class="title">待审核房源:</span><small class="num">3000</small><small>套</small></p>
              </dd>
            </dl>
            <dl>
              <dt><div class="middle-box4-icon hz-icon2"></div></dt>
              <dd>
                <p><span class="title">签约总数:</span><span class="white weight">3000</span><small>套</small></p>
                <p class="line2"><span class="title">入住总人数:</span><small class="num">920</small><small>人</small></p>
              </dd>
            </dl>
            <dl>
              <dt><div class="middle-box4-icon hz-icon3"></div></dt>
              <dd>
                <p><span class="title">签约金额:</span><span class="white weight">5000</span><small>万</small></p>
              </dd>
            </dl>
          </div>
        </div>
        <div class="middle-box2">
          <div class="middle-box2-inner">
            <ul class="middle-map" id="middleMap">
              <!--            <li class="daoshizhen">
                            <span>岛石镇</span>
                            <div class="map-tips">
                              <h3>岛石镇</h3>
                              <p>房间总量：80 套</p>
                              <p>已配租：34 套</p>
                              <p>服务人数：23 人</p>
                            </div>
                          </li>-->
            </ul>
            <div class="middle-light">
              <div class="middle-light-inner">
                <div class="container">
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                  <div class="circle-container">
                    <div class="circle"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="middle-circle-wrapper">
              <div class="middle-circle">
                <div id="middleCircleChartBox"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="middle-box3">
          <div class="middle-box3-inner">
            <header class="screen-sub-title3">全城租金统计</header>
            <ul class="middle-box3-part4">
              <li class="all-rented">
                <h1><b>￥ <span  class="weight">730</span><small> / 间</small></b></h1>
                <p><i class="small-circle"></i><span>整租平均租金</span></p>
              </li>
              <li>
                <h1><b>￥ <span  class="weight">730</span><small> / 间</small></b></h1>
                <p><i class="small-circle"></i><span>整租平均租金</span></p>
              </li>
            </ul>
            <div class="middle-box3-part5">
              <div id="middleBox3" style="height: 175px"></div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="screen-container-wrapper container-box-right">
      <div style="height:49px"></div>
      <div class="right-box6" style="height: 310px;margin-bottom: 50px;">
        <header class="screen-sub-title1">
          <p>租约周期统计</p>
        </header>
        <div class="right-part6-box" id="rightPart1" style="padding: 0 10px 0 15px">
        </div>
      </div>
      <div class="right-box7">
        <header class="screen-sub-title1" style="margin-bottom: 15px">
          <p>最新房源详情</p>
        </header>
        <ul class="right-box7-inner" id="rightBox2">
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑望江西路花苑望江西路花苑望江西路花苑望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
          <li>
            <div class="order-pic" style="background-image:url(img/temp_house.png);"></div>
            <div class="order-text">
              <div class="order-text-top">
                <h6>整租 | 望江西路花苑</h6>
                <div class="info">75.0m² - 2室2厅1卫</div>
              </div>
              <div class="date-box"><span>¥2450元 /月</span><b>11-12</b></div>
            </div>
            </dl>
          </li>
        </ul>
      </div>
    </div>

    <div class="dialog-bg" id="dialogBg"></div>
    <!--用display none 重绘时不加载该元素 所以不可用-->
    <div class="screen-container-wrapper light-dialog light-dialog1 hide" id="dialog1" style="visibility: hidden">
      <h2 class="dialog-title-box"><strong id="dialog1Title">全城整租统计出租率</strong><div class="dialog-close"></div></h2>
      <div class="dialog1-box-select"><div id="dialog1Select"></div></div>
      <div class="light-dialog-wrapper" id="dialog1Box">
      </div>
    </div>
    <div class="screen-container-wrapper light-dialog hide" id="dialog2" style="visibility: hidden">
      <h2 class="dialog-title-box"><strong id="dialog2Title">全城合租统计出租率</strong><div class="dialog-close"></div></h2>
      <div class="light-dialog-wrapper" id="dialog2Box"></div>
    </div>
  </div>

  <script src="js/resize.js"></script>
  <script src="js/lib/jquery.numscroll.min.js"></script>
  <script src="js/lib/echarts.min.js"></script>
  <script src="js/nowDate.js"></script>
  <script src="js/lib/SelectBox.min.js"></script>
  <script src="js/dialog1_hz.js"></script>
  <script src="js/dialog2_hz.js"></script>
  <script src="js/left.js"></script>
  <script src="js/right.js"></script>
  <script src="js/middleCircle.js"></script>
  <script src="js/render.js"></script>
  <script>
    $(function () {
      $('#loadingBox').hide();
    })
  </script>
</body>
</html>